import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import React, { useState, useCallback, useEffect } from 'react';
import { useRequest } from '@umijs/hooks';
import { Card, Button, message } from 'antd';
import styles from './index.less';
import moment from 'moment';
import router from 'umi/router';

import {
  saveContactInfo,
  updateContactInfo
} from '../service';
import {
  Const
} from '../../Const';

import AddCommunicationRecord from '../components/AddCommunicationRecord';
import AuthComponent from '@/components/Authorized/AuthComponent';

const CommunicationBox = props => {

  const { contactInfos, detailInfo, getDetail, ownerType } = props;

  const [addCommunicationRecordVisible, setAddCommunicationRecordVisible] = useState(false);
  const [addCommunicationRecordData, setAddCommunicationRecordData] = useState({});
  const [addCommunicationRecordType, setAddCommunicationRecordType] = useState({});

  // 新增沟通记录
  const { run: runSaveContactInfo } = useRequest(data => saveContactInfo(data), {
    manual: true,
    onSuccess (res) {
      console.log(res, '新增沟通记录');
      getDetail();
      setAddCommunicationRecordVisible(false);
    }
  })

  // 修改沟通记录
  const { run: runUpdateContactInfo } = useRequest(data => updateContactInfo(data), {
    manual: true,
    onSuccess (res) {
      console.log(res, '修改沟通记录');
      getDetail();
      setAddCommunicationRecordVisible(false);
    }
  })

  // 新增沟通记录 - 打开
  const addCommunicationRecordOpen = useCallback(() => {
    setAddCommunicationRecordVisible(true);
  }, []);
  // 新增沟通记录 - 取消
  const addCommunicationRecordCancel = useCallback(() => {
    setAddCommunicationRecordVisible(false);
  }, []);
  // 新增沟通记录 - 提交
  const addCommunicationRecordSubmit = useCallback(obj => {
    if (obj.id) {
      runUpdateContactInfo({
        ...obj,
        accidentId: detailInfo.accidentId
      })
    } else {
      runSaveContactInfo({
        ...obj,
        accidentId: detailInfo.accidentId
      });
    }
  }, [detailInfo]);

  return (
    <div className={styles.communicationBoxBox}>
      <div className={styles.topBox}>
        <div>沟通记录是为处理该事故单而与旅客进行通话内容的记录</div>
        <div style={{ marginTop: '10px' }}>
          <Button
            type="primary"
            style={{ marginRight: '20px' }}
            disabled={!AuthComponent.getAuth(Const.permissionsType.get(+ownerType) + '.basicPermissions')}
            onClick={() => {
              if (+detailInfo.status === 0 || +detailInfo.status === 2) {
                setAddCommunicationRecordType('add');
                setAddCommunicationRecordData({});
                addCommunicationRecordOpen();
              } else {
                message.warning('已结案或者已作废的事故单不能新增沟通记录')
              }
            }}>
            新增
          </Button>
          <Button
            type="primary"
            disabled={!AuthComponent.getAuth(Const.permissionsType.get(+ownerType) + '.basicPermissions')}
            onClick={() => {
              if (contactInfos && contactInfos.length !== 0) {
                router.push({
                  pathname: Const.commonUrl + '/inPortBaggageManagement/printPage',
                  state: {
                    accidentId: detailInfo.accidentId,
                    type: '6',
                    ownerType: 99 // 打印沟通记录特别定的一个值
                  }
                });
              } else {
                message.warning('暂无沟通记录数据');
              }
            }}>打印</Button>
        </div>
      </div>
      <div className={styles.cardBox}>
        {(contactInfos || []).map((item, index) => (
          <Card style={{ width: '32%', marginBottom: '20px', marginRight: '1%' }} key={index}>
            <div
              className={styles.cardContent}
              onClick={() => {
                if (!AuthComponent.getAuth(Const.permissionsType.get(+ownerType) + '.changeRecord')) {
                  return;
                }
                setAddCommunicationRecordType('edit');
                setAddCommunicationRecordData(item);
                addCommunicationRecordOpen();
              }}>
              <div style={{ width: '50%', color: '#000000', fontWeight: 'bold' }}>日期：</div>
              <div style={{ width: '50%', color: '#000000', fontWeight: 'bold' }}>录入人：</div>
              <div style={{ width: '50%' }}>{item.createTime || ''}</div>
              <div style={{ width: '50%' }}>{item.createUser || ''}</div>
              <div style={{ width: '100%', color: '#000000', fontWeight: 'bold' }}>沟通人：</div>
              <div style={{ width: '100%' }}>{item.createUser || ''}</div>
              <div style={{ width: '100%', color: '#000000', fontWeight: 'bold' }}>通话内容：</div>
              <div style={{ width: '100%' }}>{item.contactContent || ''}</div>
              <div style={{ width: '100%', color: '#000000', fontWeight: 'bold' }}>备注：</div>
              <div style={{ width: '100%' }}>{item.contactRemark || ''}</div>
            </div>
          </Card>
        ))}
      </div>
      <AddCommunicationRecord
        modalVisible={addCommunicationRecordVisible}
        onCancel={addCommunicationRecordCancel}
        onSubmit={addCommunicationRecordSubmit}
        itemData={addCommunicationRecordData}
        type={addCommunicationRecordType}
      ></AddCommunicationRecord>
    </div>
  )
};

export default CommunicationBox;
